<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <style>
        canvas{
            display: block;
            margin: 50px auto;
            box-shadow: -2px -2px 2px #efefef, 5px 5px 5px #efefef;

        }
    </style>
<body>
    <canvas width="450px" height="450px" id="mycanvas"></canvas>
    <script>
        window.onload=function () {

            drawchessboard();
           /* oneStep(0,0,true);
            oneStep(1,1,false);*/
        }

        var me=true;
        var mycan=document.getElementById("mycanvas");
        var c=mycan.getContext("2d");
        c.strokeStyle="#bfbfbf";
        var arr=[];
        for(var i=0;i<15;i++){
            arr[i]=[];
            for (var j=0;j<15;j++){
                arr[i][j]=0;
            }
        }

        //画棋盘
    function drawchessboard () {
        for(var i=0;i<15;i++){
            c.moveTo(15+i*30,15);
            c.lineTo(15+i*30,435);
            c.stroke();
            c.moveTo(15,15+i*30);
            c.lineTo(435,15+i*30);
            c.stroke();
        }

    }
    //画旗子



        var oneStep=function (i,j,me) {
            c.beginPath();
            c.arc(15+i*30,15+j*30,13,0,2*Math.PI);
            c.closePath();
            var gradual=c.createRadialGradient(15+i*30+2,15+j*30-2,13,15+i*30+2,15+j*30-2,0);
            if(me){
                gradual.addColorStop(0,"#0A0A0A");
                gradual.addColorStop(1,"#636466");
            }else {
                gradual.addColorStop(0,"#d1d1d1");
                gradual.addColorStop(1,"#f9f9f9");
            }
            c.fillStyle=gradual;
            c.fill();
        }
        var over=false;
        mycan.onclick=function (e) {
            if(over){
                return;
            }
            var x=e.offsetX;
            var y=e.offsetY;
            var i=Math.floor(x/30);
            var j=Math.floor(y/30);
            if( arr[i][j]==0){
                oneStep(i,j,me);
                if(me){
                    arr[i][j]=1;
                }else {
                    arr[i][j]=2
                }
                me=!me;///*让me取反*/

                for(var k=0;k<count;k++){
                    if(wins[i][j][k]){
                        mywin[k]++;
                        compwin[k]=6;
                        if(mywin[k]==5){
                            window.alert("你赢了！！！");
                            over=true;
                        }

                    }
                }
                if(!over){
                    compAI();
                }


            }

        }

        var compAI=function () {
            
        }


        var wins=[];
        for(var i=0;i<15;i++){
            wins[i]=[]
            for (var j=0;j<15;j++){
                wins[i][j]=[];
            }
        }
        var count=0;
        /*横线赢法*/
        for(var i=0;i<15;i++) {
            for (var j = 0; j < 11; j++) {
                for (var k = 0; k < 5; k++) {
                    wins[i][j+k][count]=true;
                }
                count++;
            }
        }

        /*竖线赢法*/
        for(var i=0;i<15;i++) {
            for (var j = 0; j < 11; j++) {
                for (var k = 0; k < 5; k++) {
                    wins[j+k][i][count]=true;
                }
                count++;
            }
        }
        /*斜线*/
        for(var i=0;i<11;i++) {
            for (var j = 0; j < 11; j++) {
                for (var k = 0; k < 5; k++) {
                    wins[i+k][j+k][count]=true;
                }
                count++;
            }
        }
        /*反斜线*/
        for(var i=0;i<11;i++) {
            for (var j = 14; j < 3; j--) {
                for (var k = 0; k < 5; k++) {
                    wins[i+k][j-k][count]=true;
                }
                count++;
            }
        }
        console.log(count);
        var mywin=[];
        var compwin=[];
        for(var i=0;i<count;i++){
            mywin[i]=0;
            compwin[i]=0;
        }
    </script>

</body>
</html>